<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
            margin-top: 30px;
        }

        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto; /* 设置上下边距为20px，左右边距自动 */
            padding: 20px; /* 设置左右边距为20px */
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        thead {
            background-color: #e0e0e0;
        }

        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            cursor: pointer;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 0 2px;
            transition-duration: 0.4s;
        }

        button:hover {
            background-color: #45a049;
        }

        input.count {
            width: 50px;
            text-align: center;
        }
        .total {
            font-weight: bold;
            font-size: 24px;
            margin-top: 20px;
            text-align: center;
        }
    </style>
    <script>
        function changeCount(id,type){
            const countInput = document.getElementById("count"+id)
            if(type == 'add'){
                countInput.value = parseInt(countInput.value) + 1
            }else if(type == "minus"){
                if(countInput.value == 1){
                    alert("最少是1")
                }else{
                    countInput.value = parseInt(countInput.value) - 1
                }
            }
            showMoney()
        }

        function showMoney(){
            const rows = document.getElementsByClassName("row");
            let total = 0;
            for (const row of rows) {
                const price = parseFloat(row.getElementsByClassName('price')[0].innerText)
                const count = parseInt(row.getElementsByClassName('count')[0].value)
                const xiaoji = price * count;
                row.getElementsByClassName("xiaoji")[0].innerText = xiaoji

                if(row.getElementsByClassName('cartCheckBox')[0].checked){
                    total += xiaoji
                }

            }
            document.getElementById("total").innerText = total
        }

        function selectAll(){
            const selectedAll = document.getElementById("allCheckBox").checked;
            const cartCheckBoxList = document.getElementsByClassName("cartCheckBox")
            for (const cartCheckBoxListElement of cartCheckBoxList) {
                cartCheckBoxListElement.checked = selectedAll
            }

            showMoney()
        }

        function selectSingle(){
            let flag = true
            const cartCheckBoxList = document.getElementsByClassName("cartCheckBox")
            for (const cartCheckBoxListElement of cartCheckBoxList) {
                flag = flag && cartCheckBoxListElement.checked
            }
            document.getElementById("allCheckBox").checked = flag

            showMoney()
        }

        function deleteRow(id){
            const row = document.getElementById("row"+id)
            row.parentNode.removeChild(row)

            showMoney()
        }

        function deleteSelectedRow(){
            const rows = document.getElementsByClassName("row");
            for (let i = rows.length-1; i >= 0 ; i--) {
                if(rows[i].getElementsByClassName('cartCheckBox')[0].checked){
                    rows[i].parentNode.removeChild(rows[i])
                }
            }
            showMoney()
        }

        window.onload = showMoney
    </script>
</head>
<body>
    <button onclick="deleteSelectedRow()">删除所选</button>
    <table>
        <thead>
            <tr>
                <th><input id="allCheckBox" type="checkbox" onclick="selectAll()"/>全选 </th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row" id="row1">
                <td><input type="checkbox" class="cartCheckBox" onclick="selectSingle()"/></td>
                <td>外星人笔记本</td>
                <td class="price">200</td>
                <td>
                    <button onclick="changeCount(1,'minus')">-</button>
                    <input id="count1" class="count" value="1"/>
                    <button onclick="changeCount(1,'add')">+</button>
                </td>
                <td class="xiaoji">

                </td>
                <td>
                    <button onclick="deleteRow(1)">删除</button>
                </td>
            </tr>
            <tr class="row"  id="row2">
                <td><input type="checkbox"  class="cartCheckBox" onclick="selectSingle()"/></td>
                <td>外星人笔记本2</td>
                <td class="price">2000</td>
                <td>
                    <button onclick="changeCount(2,'minus')">-</button>
                    <input id="count2" class="count" value="1"/>
                    <button onclick="changeCount(2,'add')">+</button>
                </td>
                <td class="xiaoji">

                </td>
                <td>
                    <button onclick="deleteRow(2)">删除</button>
                </td>
            </tr>
            <tr class="row" id="row3">
                <td><input type="checkbox"  class="cartCheckBox" onclick="selectSingle()"/></td>
                <td>外星人笔记本3</td>
                <td class="price">150</td>
                <td>
                    <button onclick="changeCount(3,'minus')">-</button>
                    <input id="count3" class="count" value="1"/>
                    <button onclick="changeCount(3,'add')">+</button>
                </td>
                <td class="xiaoji">

                </td>
                <td>
                    <button onclick="deleteRow(3)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="total" id="total">
        总价:xxx
    </div>
</body>
</html>